<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app{
            
            margin:0 auto;
            /* border:3px solid red; */
            text-align:center;
            
            }
    </style>
</head>
<body>
    <div id="app">
        <h3>单行文本框</h3>
        <input type="text"v-model="singleText" style="width:240px;">
        <p>{{ singleText }}</p>
        <h3>多行文本框</h3>
        <textarea name="" id="" cols="30" rows="10"style="width:200px;"v-model="multiText"></textarea>
        <pre>{{ multiText }}</pre>
        <h3>单行框</h3>
        <!--  由于被点击的单选项无法取消被选中的状态 ，所以实战中一般很少出现使用单个选项的场景
                这里，设置v-model共用同一个变量（radioValue）可实现radioGroup的效果
        -->
        <input type="radio" id="ra" value="杨玉环" v-model="radioValue">
        <label for="ra">A.杨玉环</label>
        <input type="radio" id="rb" value="赵飞燕" v-model="radioValue">
        <label for="rb">B.赵飞燕</label>
        <p>{{ radioValue }}</p>
        <h3>单个复选框</h3>
        <!--单个复选框被用于truehefalse的切换  -->
        <input type="checkbox" id="c" v-model="toggValue">
        <label for="c">天生丽质</label>
        <p>{{ toggValue }}</p>
        <h3>多个复选框</h3>
        <!-- 多个复选框 ，v-model接收数组类型变量 -->
        <input type="checkbox" id="ca" value="漂亮" v-model="checkedValues"/>
        <label for="ca">A.回眸一笑百媚生</label>
        <input type="checkbox"id="cb"  value="瘦弱" v-model="checkedValues"/>
        <label for="cb">B.提轻能为掌上舞</label>
        <input type="checkbox" id="cc"  value="得宠" v-model="checkedValues"/>
        <label for="cc">C.三千宠爱在一身</label>
        <p>{{ checkedValues.join(',') }}</p>
    </div>
    <script type="text/javaScript"  charset="UTF-8" src="../JS文件/vue.js"></script>
    <script>

        let vm=new Vue({
            el:'#app',
            data(){
                return {
                    singleText:'无',
                    multiText:'',
                    radioValue:'',
                    toggValue:false,
                    checkedValues:[]
                }
            }
        })

    </script>
</body>
</html>